<template>
    <section class="check-page">
        <Scan :toScanBlock='scanBlock' @closeModal="CloseModal" />
        <div class="container">
            <div class="row check_block">
                <div class="content">
                    <p-info :toPatientInfo='PatientInfoData' :toOperations='operations'></p-info>
                </div>
                <!-- start 手术部位 -->
                <div class="content ">
                    <P-operative :toPatientInfo='PatientInfoData' :toOperations='operations'></P-operative>
                </div>

                <div class="content ">
                    <div class="check_count white_bg">
                        <div class="check_count_top">
                            <ul class="ul_list w_10">
                                <li class="">
                                    等待手术人数
                                </li>
                                <li class="">
                                    <img src="@/assets/img/icon/edit1.png" class="icon_hover" alt="icon" />
                                </li>
                                <li class="">
                                    <h3 class="font_weight_bolder">5人</h3>
                                </li>

                            </ul>
                            <ul class="ul_list w_10">
                                <li class="">
                                    预计手术开始时间
                                </li>
                                <li class="">
                                    <img src="@/assets/img/icon/edit1.png" class="icon_hover" alt="icon" />
                                </li>
                                <li class="">
                                    <h3 class="font_weight_bolder">5人</h3>
                                </li>

                            </ul>
                            <ul class="ul_list w_10">
                                <li class="">
                                    术前抗生素时间
                                </li>
                                <li class="">
                                    <img src="@/assets/img/icon/edit1.png" class="icon_hover" alt="icon" />
                                </li>
                                <li class="">
                                    <h3 class="font_weight_bolder">5人</h3>
                                </li>

                            </ul>
                        </div>
                        <div class="bolder_bottom mb_10"></div>
                        <div class="check_count_center">
                            <div class="count_center_box mb_10">
                                <p class="text_left">
                                    医生备注
                                </p>
                                <div class="center_box_text">

                                </div>
                            </div>
                            <div class="count_center_box">
                                <p class="text_left">
                                    护士备注
                                </p>
                                <div class="center_box_text">

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="row check_block_bottom">
                <div class="content w_2">
                    <div class="white_bg check_msg">
                        <div class="check_msg_title">
                            <p>病人检查信息</p>
                        </div>
                        <div class="check_msg_content mt_10">
                            <ul class="check_msg_list">
                                <li class="check_msg_block">
                                    <img src="@/assets/img/icon/check/message/cj.png" class="icon_hover" alt="icon" />
                                    <p>
                                        采集
                                    </p>
                                </li>
                                <li class="check_msg_block">
                                    <img src="@/assets/img/icon/check/message/binglishi.png" class="icon_hover" alt="icon" />
                                    <p>
                                        病例
                                    </p>
                                </li>
                                <li class="check_msg_block">
                                    <img src="@/assets/img/icon/check/message/jybg.png" class="icon_hover" alt="icon" />
                                    <p>
                                        检验
                                    </p>
                                </li>
                            </ul>
                            <ul class="check_msg_list">
                                <li class="check_msg_block">
                                    <img src="@/assets/img/icon/check/message/bl.png" class="icon_hover" alt="icon" />
                                    <p>
                                        病理
                                    </p>
                                </li>
                                <li class="check_msg_block">
                                    <img src="@/assets/img/icon/check/message/cj.png" class="icon_hover" alt="icon" />
                                    <p>
                                        采集
                                    </p>
                                </li>
                                <li class="check_msg_block">
                                    <img src="@/assets/img/icon/check/message/pasc.png" class="icon_hover" alt="icon" />
                                    <p>
                                        PACS
                                    </p>
                                </li>
                            </ul>
                            <ul class="check_msg_list">
                                <li class="check_msg_block">
                                    <img src="@/assets/img/icon/check/message/cj.png" class="icon_hover" alt="icon" />
                                    <p>
                                        采集
                                    </p>
                                </li>
                                <li class="check_msg_block">
                                    <img src="@/assets/img/icon/check/message/xdt.png" class="icon_hover" alt="icon" />
                                    <p>
                                        心电图
                                    </p>
                                </li>
                                <li class="check_msg_block">
                                    <img src="@/assets/img/icon/check/message/jc.png" class="icon_hover" alt="icon" />
                                    <p>
                                        检查
                                    </p>
                                </li>
                            </ul>
                            <ul class="check_msg_list">
                                <li class="check_msg_block ">
                                    <img src="@/assets/img/icon/check/message/lsyz.png" class="icon_hover" alt="icon" />
                                    <p>
                                        临时医嘱
                                    </p>
                                </li>
                                <li class="check_msg_block ">
                                    <img src="@/assets/img/icon/check/message/ghhz.png" class="icon_hover" alt="icon" />
                                    <p>
                                        更换患者
                                    </p>
                                </li>

                            </ul>

                        </div>
                    </div>

                </div>
                <div class="content w_5">
                    <div class="white_bg check_project">
                        <div class="check_project_list mb_10 ">
                            <ul class="ul_list">
                                <li class=""><strong>已检查项目：</strong></li>
                                <li>
                                    <button class="btn check_project_btn active">术前四项</button>
                                    <button class="btn check_project_btn ">凝血四项</button>
                                    <button class="btn check_project_btn ">全血分析</button>
                                    <button class="btn check_project_btn ">生化七项</button>
                                    <button class="btn check_project_btn ">血常规</button>
                                    <button class="btn check_project_btn ">尿常规</button>
                                    <button class="btn check_project_btn ">X光</button>
                                    <button class="btn check_project_btn ">心电图</button>
                                </li>
                            </ul>
                        </div>
                        <table class="table table-border table_layout table_small">
                            <thead>
                                <tr>
                                    <th colspan="8">检验数据异常值</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="2">标本名</td>
                                    <td>开单</td>
                                    <td>项目名称</td>
                                    <td>状态</td>
                                    <td>结果</td>
                                    <td>单位</td>
                                    <td>参考范围</td>
                                </tr>
                                <tr v-for="(item, index) in 3">
                                    <td></td>
                                    <td>10:00</td>
                                    <td>何妙春</td>
                                    <td>04</td>
                                    <td>467048</td>
                                    <td>欧阳安军</td>
                                    <td>左眼白内障超声化抽手术</td>
                                    <td>左眼老年性白内障</td>
                                </tr>
                                <tr>
                                    <td v-for="(item, index) in 8" :key="index"></td>
                                </tr>

                            </tbody>

                        </table>
                    </div>
                </div>
                <div class="content w_3">
                    <div class="white_bg check_life">
                        <table class="table table-border table_layout table_small">
                            <thead>
                                <tr>
                                    <th colspan="8">患者生命体征</th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr>
                                    <td></td>
                                    <td>时间</td>

                                    <td>体温</td>

                                    <td>血压</td>

                                    <td>脉搏</td>

                                    <td>呼吸</td>



                                </tr>
                                <tr>

                                    <td></td>

                                    <td>2017/10/20</td>

                                    <td>36.6</td>

                                    <td>90/120</td>

                                    <td>76</td>

                                    <td>20</td>

                                </tr>
                                <tr>

                                    <td></td>

                                    <td>2017/10/20</td>

                                    <td>36.6</td>

                                    <td>90/120</td>

                                    <td>76</td>

                                    <td>20</td>

                                </tr>

                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script lang="ts">
    import {
        Component,
        Vue
    } from 'vue-property-decorator';
    import Scan from '@/components/modal/scan/Scan.vue';
    import PInfo from '@/components/pcard/info.vue';
    import POperative from '@/components/pcard/operative.vue'
    import { State, Action, Getter } from 'vuex-class';

    const namespace: string = 'patient';

    @Component({
        components: {
            Scan,
            PInfo,
            POperative
        },
    })

    export default class Patient_Check extends Vue {
        
        
        @Action('surgicalApplyGetAction', { namespace }) getPatientInfo: any; 
        @Getter('surgicalApplyGet', { namespace }) "PatientInfoList": string;

        PatientInfoData:any[]=[];
        operations:any[]=[];
        scanBlock = false;
        
        CloseModal(msg: any) {
            this.scanBlock = false;
        }

        mounted() {
            this.getPatientInfo().then(m => {
                this.PatientInfoData=m;

                this.operations=JSON.parse(this.PatientInfoData.operations);
               
            });
        } 
    }
</script>

<style lang="scss" scoped>
    .check-page {
        .container {
            background: $bgColor;
            padding: 0;

            .row {
                .content {
                    padding: 0.1rem 0;
                    overflow: auto;
                    display: table-cell;
                    .white_bg {
                        width: 100%;
                        // height: $box_height;
                        overflow: auto;
                        background: $content_bgColor;
                        @include box_shadow;
                        padding: 0.1rem;
                    }

                    &:first-child {
                        width: 50%;
                        padding-left:0.1rem;
                    }

                    &:nth-child(2){
                        width: 36%;
                    }

                    &:nth-child(3) {
                        width: 14%;
                    }

                    .ul_list {
                        .list_detail {
                            color: $themecolor;
                        }
                    }
                }

               

               

                .check_count {
                    .check_count_top {
                        .ul_list {
                            margin-bottom: 10px;

                            li {
                                font-size: $small_p;
                                text-align: left;

                                img {
                                    width: 22px;

                                }

                                &:nth-child(1) {

                                    width: 60%;
                                }

                                &:nth-child(3) {
                                    text-align: left;
                                    color: $themecolor;
                                }
                            }
                        }
                    }

                    .count_center_box {
                        p {
                            font-size: $small_p;
                            text-align: left;
                            margin-bottom: 5px;
                        }

                        .center_box_text {
                            @include bolder;
                            height: 85px;
                            text-align: left;
                        }
                    }
                }

            }

            //下半部分
            .check_block_bottom {
                .content {
                    padding-top: 0;

                    .white_bg {
                        height: 225px;
                        padding: 0.05rem;
                    }

                    .check_msg {
                        .check_msg_title {
                            p {
                                font-size: $small_p;
                            }
                        }

                        .check_msg_content {
                            .check_msg_list {
                                margin-bottom: 1%;

                                .check_msg_block {
                                    background: $blue_color;
                                    width: 32%;
                                    margin-right: 1%;
                                    padding: 2px;

                                    p {
                                        color: $color;
                                        font-size: 0.1rem;
                                        font-weight: bolder;
                                    }

                                    img {
                                        width: 25px;
                                    }

                                    &:last-child {
                                        margin-right: 0;
                                    }
                                }

                                &:last-child {
                                    .check_msg_block {
                                        margin-right: 1%;

                                        &:last-child {
                                            width: 65%;
                                            margin-right: 0;
                                            background: $warning_color;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .check_project {
                        padding: 0.1rem;

                        .table {
                            font-size: 0.1rem;

                            tbody {
                                tr:nth-child(2) {
                                    background: #e8f7f4;
                                }

                                tr:nth-child(3) {
                                    td:first-child {
                                        border-bottom: 1px solid #cbcbcb;
                                    }
                                }
                            }
                        }
                    }

                    .check_life {
                        .table {
                            font-size: 0.1rem;

                            tbody {
                                tr:nth-child(2) {
                                    background: #e8f7f4;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .action_btn {
        padding: 0;
        width: 100%;
        display: block;
    }

    .action_btn+.action_btn {
        margin-top: 20px;
    }

    .check_project_btn {
        width: 60px;
        height: 28px;
        padding: 0;
        @extend .btn_white;
        @extend .btn_radius_small;
        border: 1px solid $table_bolder_color;
        color: $grey_p;

        &.active {
            border-color: $themecolor;
            color: $color;
        }

        &+.check_project_btn {
            margin-left: 10px;
        }
    }
</style>